<template>
  <div class="hello">
      <router-link target='_blank' to="/girl">
    <button>少女</button>
    </router-link>

    <router-link to="/boy/id=18">
    <button>少男的动态路由</button>
    </router-link>
    <hr/>
    <router-link to="/father">
      <button>嵌套父路由</button>
    </router-link>
    <hr/>
    <h3>编程式导航</h3>
    <button @click="dauther()">编程式导航到女儿那里</button>
    <button @click="milf()">编程式导航到少妇那里去</button>
    <router-link to="{name:'milf',query:{this.boy}}" >
    <button >编程式导航到少妇那里去2</button>
    </router-link>
    <hr/>
    <h3>历史记录</h3>
    <button @click='gohead()'>前进</button>
    <button @click="back()">后退</button>

    <hr/>
    <h3>命名视图 动物园</h3>
    <router-link to="/animal">
      <button>命名视图 动物园</button>
    </router-link>
    <hr/>
    <h3>重定向与别名</h3>
    <router-link to='/zhangwei'>
    <button>重定向张伟跳到张益达</button>
    </router-link>
     <router-link to='/zhangyida2'>
    <button>别名张益达到张伟</button>
    </router-link>
    <hr></hr>
    <h3>prop传递参数</h3>
    <router-link to="/teacher/18">
    <button>美女老师</button>
    </router-link>
    <router-link to="/teacher2" >
    <button>美女老师2</button>
    </router-link>

    <hr/>
    <h1>监控数据的变化</h1>
    <button @click='sun'>孙尚香</button><br/>
    孙尚香的年龄-{{age}}
    过去的年龄:{{oldAge}}
    现在的年龄:{{nowAge}}
    <br/>
    <button @click='sun2'>新窗口孙尚香2号</button>
    <hr/>
    <h1>组件应用</h1>
    <button @click="taowa">禁止套娃</button>
        <hr/>
    <h1>父子组件互相传值 ，调用方法</h1>
    <button @click="dad">爹地</button>
    <br/>
    <router-link to="/gundong">滚动</router-link>
    <br/>
    <router-link to="/chacao">插槽</router-link>
    <br>
    <router-link to="/jumingchacao">具名插槽-给插槽起名字，想插哪里就插哪里</router-link>
    <br>
    <router-link to="/scope-slot">作用域插槽，给插槽传递参数。</router-link>

<h1>{{ msg }}</h1>
    </div>
</template>

<script>
let boyId = '28cm的jiji'
let boy = {
  name:'黄三',
  age:18,
  sex:'非常性感的人'
}
// boy = 1;
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      boy:boy,
      age:18,
      oldAge:'',
      nowAge:'',

    }
  },
  methods:{
    dauther(){
      this.$router.push({path:'/dauther'})
    },
    milf(){
      // this.$router.push({path:`/milf/${boyId}`}) //拼路径
      // this.$router.push({path:'/milf',query:{boyId:boyId}}) //携带单个参数
     let milf =  this.$router.resolve({name:'milf',query:{boy:boy}}); //携带对象  name是router配置的那个name
     window.open(milf.href,'_blank')
    },
    gohead(){
      this.$router.go(1);
    },
    back(){
      this.$router.go(-1);
    },
    sun(){
      this.age++;
    },
    sun2(){
       let sun = this.$router.resolve({name:'sun',query:{age:this.age}});
       window.open(sun.href,'_blank');
    },
    taowa(){
      let tao = this.$router.resolve({name:'dawa'});
      window.open(tao.href,'_blank')
    },
    dad(){
       let dad = this.$router.resolve({name:'dad'});
      window.open(dad.href,'_blank')
    }
  },
  watch:{
    age(nowAge,oldAge){
        this.oldAge = oldAge;
        this.nowAge = nowAge;

       let sun = this.$router.push({name:'sun',query:{age:nowAge}});
      ;

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
